Gravatar Hovercards
Update: Forget this plugin. Go install Jetpack instead.
WordPress.com rolled out a nifty new feature called “Gravatar Hovercards” today. Basically it changes gravatar images into popups showing more info when the user hovers over them. In the comments, Andy Peatling mentioned bringing them to self-hosted WordPress blogs soon.
I didn’t feel like waiting.
<?php
/*
Plugin Name: Gravatar Hovercards
*/
function gravatar_hovercards() {
wp_enqueue_script( 'gprofiles', 'http://s.gravatar.com/js/gprofiles.js', array( 'jquery' ), 'e', true );
}
add_action('wp_enqueue_scripts','gravatar_hovercards');
This is not official.
It’s not supported.
It may not even work for you.
It certainly won’t work if they change things.
Still, this blog is about fun things I do with WordPress, so I saw no reason not to post it. I expect they’ll come out with their own plugin soon, but I’d be rather surprised if it’s much more than this. Maybe some extra options or something. I dunno. Switch to that script when it comes out.
But for those people who like experimenting and playing with WordPress on the edge, here you go.
And for you Javascript inclined people, take a look at their code. It’s got some tricks in it that are pretty neat.
Enjoy. 🙂
(Updated as per several comments)
I don’t think your plugin will work unless jQuery is already enqueued in the theme. 😉
True enough, but I use jQuery for so many other things that that didn’t occur to me. 😉
LOL, that was even faster than we expected someone to post it 😉
We’re going to be releasing a plugin with a bunch of Gravatar “extras”, this will be one of them. In the meantime, this will definitely get the job done!
Nice, can you combine it with Otto’s Gravatarbox plugin?
Since if you’re making the Gravatar more important, then the awarenes to create a gravatar should be better aswell, which Otto’s plugin does.
Yes, you should be able to use both of my plugins together, no problem.
http://s.gravatar.com/js/gprofiles.js is globally distributed and should be faster to load. I would suggest using that 🙂
[…] nu există un plugin pentru WordPress self-hosted, o soluție temporară a fost oferită de Otto. Crează un fișier PHP cu codul respectiv, uploadează-l în wp-content/plugins și activează-l […]
I tried the first code posted few hours ago. I used the lines 11-14 in my functions.php. Thanks to you, I now have Gravatar Hovercards too! 🙂
The first version of the code worked for some specific cases.
The current code should work for all cases (thanks to Alex’s comment), as well as be a bit faster (thanks to Barry’s comment).
Wow!
Just implementend in my http://www.wordpressmania.it blog… works like a charm!
Thank you
STefano
I just tried and it just kind of load a little bit and stops, doesn’t even show the hovercard, weird.
James below helped me to figure this out.
It seem when you use your extra e-mails it doesn’t pop-up your hovercard. Only with your primary e-mail address…
They actually mention this in their developer’s pages: http://en.gravatar.com/site/implement/profiles/
“…profile requests will only resolve for the hash of the primary address on an account…”
Only your main email address has a profile.
Hm, it never seemed like a problem before when it was only concerning profiles, since they’re often intentionally linked to separate of gravatars, but this is definitely a problem with hovercards. To date I have seven email accounts linked to Gravatar account (I rotate emails frequently) and I can easily fix all of the comments on my blogs by changing my profile’s email address, but I guess the thousands of other comments that I’ve left “in the wild” will just have to make do with my hovercardless mug.
I know it’s not your problem, just venting sharing my frustration.
Just added this to my website http://www.kennynsal.com and it works a treat. Great work Otto and glad I stumbled across your website this morning. Cheers
[…] across a site by Otto today explaining how WordPress.com is introducing a new feature called Gravatar Hovercards. It […]
Any idea how to get this working with IE? I get “Object doesn’t support this property or method” gprofiles.js line 331 character 3 from all sites using this. Thanks for the code btw, works great in FF
Because I’m a sucker for optimization and couldn’t resist, your entire plugin could be replaced with this one line of code:
wp_enqueue_script( 'gprofiles', 'http://s.gravatar.com/js/gprofiles.js', array( 'jquery' ), 'e', true );When I tried that before, the footer code didn’t get inserted. Perhaps I have some other issue there.
I tested before leaving my comment — it worked fine for me in WordPress trunk.
We’re using it successfully at Weblog Tools Collection. I’d like to give a special thanks to both Alex for the code and you for the idea to use it has a plugin.
Do you have inserted in your footer? I didn’t have and was having the same problem before I added it…
It didn’t show the code (was between php tags), but I was talking about [ wp_footer(); ]
http://codex.wordpress.org/Theme_Development
Shouldn’t wp_enqueue_script() always be attached to a hook, though? Specifically, wp_enqueue_scripts would be the proper hook.
Why? To avoid the wasteful function call on like AJAX calls or something? I never attach mine to a hook other than
init.[…] for the above code goes entirely to Otto and Alex. It is not official and not supported, so you should probably switch over to […]
Thanks for this! Works perfect.
Very neat post once again Otto. Also, didn’t know that s.gravatar.com is a global CDN, I thought it was more probably distributed across several datacenter in the US only (that’s what wp.com is, right?)
WordPress.com may be in US datacenters, but our static CDN subdomains aren’t. They’re Edgecast or whatnot. 😉
[…] si no tienes ganas de esperar Otto tiene la solución, crea un archivo llamado hovercards.php, copia y pega en el siguiente […]
I can’t get this working on my custom theme (based on the old wordpress default kubrick). I’m guessing I need to do something in my comments template? Currently my theme displays comments using . Switching to twenty ten temporarily for testing and it all works fine…
The javascript code is not dependent upon how the gravatar is being displayed. It just finds the images on the page and adjusts them. So it shouldn’t matter how your comments loop works.
It’s got to be something in the theme…tried everything and it just doesn’t work. Example link:
http://www.reverbstudios.ie/blog/1794/get-facebook-page-notifications/
There is some strange stuff there that is messing with jQuery. Try removing this from your theme:
$wpml = jQuery.noConflict();
jQuery = jQuery.noConflict();
$ = jQuery.noConflict();
That code seemed to be generated by my Newsletter plugin. Deactivating it didn’t make a difference. Neither did deactivating all other plugins! Weird..
I noticed I get an error in IE with certain themes, 2010 weaver, (this site) for example when using this. Object doesn’t support this property or method line 331 char 3.
It works fine with twenty ten on wordpress.com and webtoolscollection. Anyone have any idea what might be causing it?
Fix for this given here: http://wordpress.org/support/topic/hovercards-on-self-hosted-theme-issue?replies=28
[…] blogs and they are working on an official plugin for self-hosted wordpress blog installations. Otto wrote a piece of code which immediately enables gravatar hovercards in your self-hosted wordpress […]
[…] plugin and they will automatically appear. No configuration necessary! This plugin is based on code from Otto of OttoPress.com. Please note that it is not the official plugin, but it works. Install […]
It is very funny I love this plugin. Now I would like to see shows my avatar …
Works fine. Thanks. 😉
Bye,
Emanuele
I really love a 4 line plugin… especially one that adds such great functionality. Thanks for this!
Hey, I have implemented hovercard in my website (not wordpress blog). work properly.
I’d love to know how you did it 🙂 I’m trying to do the same for some non-WP websites, and it’s rather harder than I thought (compared to just displaying the Gravatar image, which is trivial, of course!)
hi, I recently installed jetpack on my blog but Hovercard does not work! I can see my hover card whenever I go to Settings>>>discussions though.
maybe there’s something wrong with my theme?? anyway, was wondering if you could help me out with this??? thanks.
[…] because many of the blogs didn’t support it and there was a lot of plugin interference. Otto of WordPress came through a solution of inserting a short script in your theme’s functions.php file, but […]
[…] hope this will work for you. Credit goes to Otto. jQuery(document).ready(function($) { […]
[…] Credit for the above code goes entirely to Otto and Alex. […]
[…] I hope this will work for you. Credit goes to Otto. […]
[…] Fuller posted this modification of the code from Ottopress.com that adds Gravatar hovercards. Rich has loads of other hacks and tips that you’ll want to […]
[…] I hope this will work for you. Credit goes to Otto. […]
Thanks Samuel helping me out i was looking for this only but i wanted to intergrate my gravatar left side of the title but couldnt find it can you help me out ??